<template>
  <div>
    <div class="ranking" v-if="provinceRanking.length>0">
      <div style="margin-bottom:2.3rem">
        <span style="margin-right:2%;display:inline-block;width:2.9rem;height:3.2rem">
          <img src="@/assets/img/rank1.png" alt width="80%" height="80%" />
        </span>
        <span style="margin-right:4%">{{provinceRanking[0].name}}</span>
        <span>{{provinceRanking[0].value}}人</span>
      </div>
      <div style="margin-bottom:2.3rem">
        <span style="margin-right:2%;display:inline-block;width:2.9rem;height:3.2rem">
          <img src="@/assets/img/rank2.png" alt width="80%" height="80%" />
        </span>
        <span style="margin-right:4%">{{provinceRanking[1].name}}</span>
        <span>{{provinceRanking[1].value}}人</span>
      </div>
      <div>
        <span style="margin-right:2%;display:inline-block;width:2.9rem;height:3.2rem">
          <img src="@/assets/img/rank3.png" alt width="80%" height="80%" />
        </span>
        <span style="margin-right:4%">{{provinceRanking[2].name}}</span>
        <span>{{provinceRanking[2].value}}人</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['provinceRanking'],

  watch: {
    provinceRanking: {
      handler(val, oldVal) {
        // this.provinceRanking=val
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.ranking {
  font-size: 1.8rem;
  color: #5cffff;
  background: url('../../../../../assets/img/laborDataCenter/rank.png') no-repeat;
  background-size:100%;
  width: 100%;
  height: 100%;
  padding:3.3rem 0rem 3.3rem 3rem;
}
</style>